<style scoped>
.common-layout {
  height: 100dvh;
}

.el-container {
  height: 100dvh;
}

.el-sub-menu__title img{
  margin-right: 10px;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0 10px 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.flex-grow {
  flex-grow: 1;
}
</style>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" style="background: var(--el-bg-color-overlay);border-right: 1px var(--el-menu-border-color) solid;overflow: hidden">
        <div class="logo"><img src="../assets/logo.jpg" alt="logo" style="width: 20%;border-radius: 50%">XHAdmin</div>
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo">
          <el-menu-item index="1" @click="Router.push('/home/')">
            <template #title>
              <el-icon>
                <home-filled/>
              </el-icon>
              <span>首页</span>
            </template>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Histogram/>
              </el-icon>
              <span>系统</span>
            </template>
            <el-menu-item index="2-1" @click="Router.push('/home/sysRole/index')">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
               <span>系统用户角色组</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2-2" @click="Router.push('/home/sysUser/index')">
              <template #title>
                <el-icon>
                  <setting/>
                </el-icon>
                <span>系统用户账户</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2-3" @click="Router.push('/home/sysMenu/index')">
              <template #title>
                <el-icon><Menu /></el-icon>
                <span>系统菜单管理</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header height="50px">
          <el-menu
              style="height: 50px"
              class="el-menu-demo"
              mode="horizontal"
              :ellipsis="false"
          >
            <el-breadcrumb-item :key="-1" separator="/">
              <el-icon><Location /></el-icon>
            </el-breadcrumb-item>
            <template v-for="(item, index) in breadList">
              <el-breadcrumb-item
                  v-if="item.name"
                  :key="index"
                  :to="item.path"
              >{{ item.name }}
              </el-breadcrumb-item>
            </template>
            <div class="flex-grow" />
            <el-menu-item index="1">
              <el-switch
                  v-model="isDark"
                  :active-icon="Moon"
                  :inactive-icon="Sunny"
                  inline-prompt
                  @change="toggleDark"
              />
            </el-menu-item>
            <el-sub-menu index="2">
              <template #title>
                <img v-if="userStore.userInfo.avatarUrl != null" :src="userStore.userInfo.avatarUrl" style="width: 40px;height: 40px;border-radius: 50%"  alt=""/>
                <el-icon v-else>
                  <User />
                </el-icon>
                <span>{{ userStore.userInfo.realName}}</span>
              </template>
              <el-menu-item index="2-1" @click="Router.push('/home/sysUser/info')">
                <el-icon>
                  <el-icon>
                    <Document />
                  </el-icon>
                </el-icon>
                <span>个人信息</span>
              </el-menu-item>
              <el-menu-item index="2-2" @click="logout">
                <el-icon>
                  <el-icon>
                    <DeleteFilled />
                  </el-icon>
                </el-icon>
                <span>注销登录</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-header>
        <el-main style="background: var(--el-bg-color-overlay);
        box-shadow: rgba(50, 50, 93, 0.25) 0 10px 20px -12px inset, rgba(0, 0, 0, 0.3) 0 18px 1px -20px inset;">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import httpInstance from "@/axios";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import {
  DeleteFilled,
  Document,
  Histogram,
  HomeFilled,
  Location,
  Moon,
  Setting,
  Sunny,
  User
} from "@element-plus/icons-vue";
import {onMounted, ref, watch} from "vue";
//用户仓库
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const Router = useRouter();

//面包屑路径存放
const breadList = ref()

const getMatched = () => {
  breadList.value = Router.currentRoute.value.matched;
}

watch(Router.currentRoute.value,(to,from) => {
  breadList.value = Router.currentRoute.value.matched;
})

//注销功能
const logout = () => {
  httpInstance.get("/auth/logout")
      .then((responseData) => {
        console.log(responseData)
        if (responseData.code === 200) {
          localStorage.removeItem("Authorization");
          ElMessage.success(responseData.message)
          Router.push("/")
        }else{
          localStorage.removeItem("Authorization");
          Router.push("/")
        }
      })
      .catch((res) => {
        ElMessage.error(res.message)
      })
}

const getUserInfo = () => {
  httpInstance.get("/auth/currentSysUserInfo")
      .then(responseData => {
        if (responseData.code === 200) {
          userStore.userInfo = responseData.data
        }
      })
}

//切换主题
const isDark = ref(localStorage.getItem('isDark') === 'true')
const saveDark = () => {
}
const toggleDark = () => {
  localStorage.setItem('isDark', isDark.value)
  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
  document.documentElement.classList.value = localStorage.getItem('theme')
}

onMounted(getUserInfo)
onMounted(()=>{
  document.documentElement.classList.value = localStorage.getItem('theme')
})
onMounted(getMatched)
</script>